import { Component, createRef } from "react";

const inputRef = createRef();
class App extends Component {
    componentDidMount() {
        inputRef.current.value = "我是非受控组件";
    }
    state = {
        val: "我是受控组件",
    };
    render() {
        return (
            <div>
                {/* 用React state去控制组件的值叫做受控组件 */}
                <input
                    type="text"
                    value={this.state.val}
                    onChange={(e) => {
                        this.setState({
                            val: e.target.value,
                        });
                    }}
                />
                <br />
                {/* 不受React状态控制的组件叫非受控组件 */}
                <input type="text" ref={inputRef} />
            </div>
        );
    }
}
export default App;
